<template>
  <el-form :inline="true" size="small">
    <el-form-item>
      <el-button type="primary" icon="Plus" @click="addDialog = true">添加员工</el-button>
    </el-form-item>
    <el-form-item>
      <el-button type="danger" icon="Delete" @click="deleteStaff(multipleSelection)">批量删除</el-button>
    </el-form-item>
  </el-form>

  <!-- 模糊查询开始 -->
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="工号: ">
      <el-input v-model="formInline.staffNo" placeholder="请输入工号" clearable />
    </el-form-item>
    <el-form-item label="姓名:">
      <el-input v-model="formInline.realName" placeholder="请输入姓名" clearable />
    </el-form-item>
    <el-form-item label="组织:">
      <el-tree-select v-model="formInline.organizationId" :data="organizationList" :props="defaultProps" node-key="id"
        check-strictly :render-after-expand="false" style="width: 240px" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
      <el-button @click="reset">清空</el-button>
    </el-form-item>
  </el-form>
  <!-- 模糊查询结束 -->

  <!-- 列表渲染开始 -->
  <el-table ref="multipleTableRef" v-loading="loading" style="width: 100%" border :data="tableData"
    @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" align="center" />
    <el-table-column label="序号" width="55" align="center">
      <template v-slot="scope">
        {{ (page - 1) * size + scope.$index + 1 }}
      </template>
    </el-table-column>
    <el-table-column property="staffNo" width="100" label="工号" align="center" />
    <el-table-column label="头像" width="80" align="center">
      <template v-slot="scope">
        <div class="block">
          <el-avatar shape="square" :size="50" :src="tableData[scope.$index].photoUrl" />
        </div>
      </template>
    </el-table-column>
    <el-table-column property="realName" label="姓名" width="120" align="center" />
    <el-table-column property="idCard" label="身份证号" min-width="173" align="center" />
    <el-table-column property="phone" label="手机号" width="117" align="center" />
    <el-table-column property="organizationName" label="组织名称" min-width="193" align="center" />
    <el-table-column property="jobName" label="岗位名称" width="100" align="center" />
    <el-table-column property="salary" label="薪资(RMB)" width="100" align="center" />
    <el-table-column property="joinDate" label="入职日期" width="110" align="center" />
    <el-table-column property="leaveDate" label="离职日期" width="110" align="center" />
    <el-table-column label="状态" fixed="right" width="70" align="center">
      <template v-slot="scope">
        <el-switch v-model="scope.row.status" @click="updateStatus(scope.row.id, scope.row.status)" />
      </template>
    </el-table-column>
    <el-table-column label="操作" fixed="right" width="200" align="center">
      <template v-slot="scope">
        <el-link type="primary" icon="edit" style="margin-right: 10px" @click="showUpdate(scope.row)">修改</el-link>
        <el-link type="danger" icon="delete" style="margin-right: 10px" @click="deleteStaff(scope.row.id)">删除</el-link>
        <el-link type="primary" icon="paperclip" @click="getRoleById(scope.row.id)">关联角色</el-link>
      </template>
    </el-table-column>
  </el-table>
  <div class="demo-pagination-block" style="margin-top: 20px">
    <el-pagination v-model:current-page="page" v-model:page-size="size" :page-sizes="[5, 10, 15, 20]" :total="total"
      :background="true" layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange"
      @size-change="handleSizeChange" />
  </div>
  <!-- 列表渲染结束 -->

  <!--员工添加-->
  <StaffAdd v-model:addDialog="addDialog" />
  <!--修改弹框界面-->
  <saffUpdate v-if="updateDialog" v-model:updateDialog="updateDialog" :rowData="rowData" />
  <!-- 关联角色 -->
  <RelevancyStaff v-model:relevancyStaffDialog="relevancyStaffDialog" :roleNameList="roleNameList"
    :currentID="currentID" :formData="formData" />
</template>

<script setup>
import { ref, onMounted, reactive } from "vue"
import axios from "@/axios/index.js"
import { ElMessageBox, ElMessage, ElTable } from "element-plus"
import StaffAdd from "./StaffAdd.vue"
import saffUpdate from "@/views/staff/saffUpdate.vue"
import RelevancyStaff from "./RelevancyStaff.vue"


const loading = ref(true)
const multipleTableRef = ref()
const multipleSelection = ref([])
const organizationList = ref([]) //组织列表
const tableData = ref([])
const page = ref(1) //当前页
const size = ref(5) //每页显示条数
const total = ref(100) //总记录数
const defaultProps = {
  label: "organizationName",
}
//模糊搜索表单
const formInline = ref({
  staffNo: "",
  realName: "",
  organizationId: "",
})

let addDialog = ref(false)
//关联角色
let relevancyStaffDialog = ref(false)

//职位集合
let roleNameList = ref([])
//已经选中角色
let formData = reactive({
  roleNameList: [],
})

let updateDialog = ref(false)
let rowData = reactive({})

//当前员工id
let currentID = ref()

//根据员工id获取旗下公司职位
let getRoleById = function (id) {
  currentID.value = id
  axios.get("/role/getRoleById", {
    params: {
      roleId: id,
    },
  })
    .then((res) => {
      roleNameList.value = []
      let data = res.data.data
      for (let i = 0; i < data.length; i++) {
        roleNameList.value.push({
          roleId: data[i].id,
          roleName: data[i].roleName,
        })
      }

      relevancyStaffDialog.value = true
    })

  //获取员工已经存在的角色
  axios.get("/staffRole/getRoleById/" + id).then((resp) => {
    formData.roleNameList = []
    let data = resp.data.data
    for (let i = 0; i < data.length; i++) {
      formData.roleNameList.push(data[i].roleId)
    }
  })
}
//显示修改界面
function showUpdate(rowData1) {
  rowData = rowData1
  updateDialog.value = true
}

//删除用户
let deleteStaff = function (id) {
  let ids = ref([])

  if (typeof id == "number") {
    ids.value.push(id)
  } else {
    for (let i = 0; i < id.length; i++) {
      ids.value.push(id[i].id)
    }
  }
  ElMessageBox.confirm("该操作将永久删除数据,请确认是否继续操作?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.get(`/staff/deleteStaff/${ids.value}`).then((response) => {
      ElMessage({
        type: "success",
        message: "删除成功",
      })
      selectAll(page.value, size.value)
    })
  })
}

//修改状态
let updateStatus = function (id, status) {
  if (status) {
    status = 1
  } else {
    status = 0
  }

  ElMessageBox.confirm("该操作将修改当前用户状态,请确认是否继续操作?", "Warning", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    axios.get(`/staff/updateStatus`, {
        params: {
          id,
          status,
        },
      }).then((response) => {
        selectAll(page.value, size.value)
      })
  })
}

//模糊搜索
const onSubmit = function () {
  axios
    .post(
      `/staff/selectAll?current=${page.value}&size=${size.value}`,
      formInline.value
    )
    .then((response) => {
      tableData.value = []
      //循环遍历数组,将获取到的数组中的staff对象添加到数组中,并将组织名称添加到数组
      for (let i = 0; i < response.data.data.data.length; i++) {
        if (response.data.data.data[i].staff.status == 1) {
          response.data.data.data[i].staff.status = true
        } else {
          response.data.data.data[i].staff.status = false
        }
        tableData.value.push(response.data.data.data[i].staff)
        tableData.value[i].organizationName =
          response.data.data.data[i].organizationName
      }
      //给总条数赋值
      total.value = response.data.data.total
      loading.value = false
    })
}

let reset = function () {
  formInline.value = {
    staffNo: "",
    realName: "",
    organizationId: "",
  }
  onSubmit()
}

//获取用户列表
let selectAll = function (current, limit) {
  tableData.value = []
  axios
    .post(`/staff/selectAll?current=${current}&size=${limit}`, formInline.value)
    .then((response) => {
      //循环遍历数组,将获取到的数组中的staff对象添加到数组中,并将组织名称添加到数组
      for (let i = 0; i < response.data.data.data.length; i++) {
        if (response.data.data.data[i].staff.status == 1) {
          response.data.data.data[i].staff.status = true
        } else {
          response.data.data.data[i].staff.status = false
        }
        tableData.value.push(response.data.data.data[i].staff)
        tableData.value[i].organizationName = response.data.data.data[i].organizationName
      }
      //给总条数赋值
      total.value = response.data.data.total
      loading.value = false
    })
}

//获取组织列表
let selectOrganizationList = function () {
  axios.get(`/organization/getList`).then((response) => {
    let result = response.data.data
    organizationList.value = result
  })
}

//页面渲染时获取用户列表
onMounted(() => {
  selectAll(page.value, size.value)
  selectOrganizationList()
})

//多选框发生变化
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

//page发生变化触发
const handleCurrentChange = (val) => {
  selectAll(val, size.value)
}

const handleSizeChange = (val) => {
  selectAll(page.value, val)
}
</script>

<style lang="less" scoped>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>
